
<template>
  <div class="pdf-container">
    <vue-pdf-embed
      :source="'http://127.0.0.1:8080/g1234.pdf'"
      class="pdf-viewer"
      :scale="0.8"
      @rendered="handleRendered"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import VuePdfEmbed from 'vue-pdf-embed'

const props = defineProps({
  pdfSource: {
    type: [String, Object, Uint8Array],
    required: true
  }
})

const handleRendered = () => {
  // 移除默认工具栏
  // const toolbars = document.querySelectorAll('.pdf-toolbar')
  // toolbars.forEach(el => el.remove())
}
</script>

<style scoped>
.pdf-container {
  background-color: #f5f5f5;
  height: calc(100vh - 40px - 64px);
  overflow-y: auto;
  padding: 0 20px ;
}

::v-deep .pdf-page {
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  background: white;
}

::v-deep .pdf-viewer {
  width: 100%;
}
::v-deep .vue-pdf-embed__page{
  padding-bottom: 8px;
}
</style>
